<template>
  <view class="tiyan-count-container" v-if="tiyanProduct && !haveVIP && residueTime && show">
    <view @click.stop="close" class="img-close">
      <view class="icon"></view>
    </view>
    <view class="tiyan-count-bg" @click="open">
      <view class="time_count_down">
        <view class="tiyan-count-bg-block">{{ residueTime[0] }}</view>
        <view>:</view>
        <view class="tiyan-count-bg-block">{{ residueTime[1] }}</view>
        <view>:</view>
        <view class="tiyan-count-bg-block">{{ residueTime[2] }}</view>
      </view>
      <view class="tiyan-count-bg-title">{{ tiyanProduct.title }}</view>
      <view class="tiyan-count-bg-title">仅限一次</view>
      <view class="tiyan-count-bg-btn">{{ tiyanProduct.price }}元 优惠</view>
    </view>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';
import moment from "@/vendor/day";

export default {
  name: 'TiyanCountDown',
  data() {
    return {
      show: true
    }
  },
  mounted() {
  },
  computed: {
    ...mapGetters(['haveVIP', 'mine', 'tiyanProduct', 'currentTime']),
    residueTime() {
      if (!this.mine || !this.mine.tiyanExpiredAt) {
        return 0
      }

      const residueTime = Math.round((moment(this.mine.tiyanExpiredAt).valueOf() - this.currentTime) / 1000)
      if (residueTime < 0) {
        return 0
      }
      let miao = residueTime % 60
      if (miao < 10) {
        miao = '0' + miao
      }
      let fen = Math.floor(residueTime / 60) % 60
      if (fen < 10) {
        fen = '0' + fen
      }
      let xiaoshi = Math.floor(residueTime / 60 / 60) % 60
      if (xiaoshi < 10) {
        xiaoshi = '0' + xiaoshi
      }
      return [xiaoshi, fen, miao]
    }
  },
  methods: {
    async open() {
      this.$emit('openTiyan')
    },
    close() {
      this.show = false
    },
  }
}
</script>

<style scoped lang='scss'>
.tiyan-count-container {
  position: fixed;
  right: 30rpx;
  bottom: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;

  .img-close {
    position: absolute;
    z-index: 1;
    top: -30rpx;
    right: -20rpx;
    width: 45upx;
    height: 45upx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    border-radius: 100rpx;

    .icon {
      width: 36upx;
      height: 36upx;
      background-size: cover;
      background-image: url("http://down.qwdata.vip/app_icon/1716658595490");
    }
  }

  .tiyan-count-bg {
    width: 140rpx;
    height: 315rpx;
    background-size: cover;
    background-image: url("http://down.qwdata.vip/app_icon/1716658338120");

    .time_count_down {
      display: flex;
      margin-top: 130rpx;
      color: #fff;
      align-items: center;
      font-size: 12px;

      .tiyan-count-bg-block {
        width: 40rpx;
        margin-left: 3rpx;
        margin-right: 3rpx;
        background: #F84928;
        border-radius: 3px;
        color: #fff;
        font-size: 11px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        &:first-child {
          margin-left: 8rpx;
        }
      }

      margin-bottom: 5rpx;
    }

    .tiyan-count-bg-title {
      color: #fff;
      text-align: center;
      font-weight: bold;
      font-size: 13px;
    }

    .tiyan-count-bg-btn {
      background: #F84928;
      color: #fff;
      margin: 0 10rpx;
      border-radius: 100rpx;
      font-size: 10px;
      text-align: center;
      margin-top: 10rpx;
      padding: 5rpx 0;
    }
  }
}
</style>
